Angular App Bootstrap & Providers

ஆங்குலர் பயன்பாட்டைத் தொடங்குதல் மற்றும் சேவை வழங்குநர்கள்

ஆங்குலர் பயன்பாடு துவக்கம் & சேவை வழங்குநர்கள்

Bootstrap என்பது உங்கள் பயன்பாட்டை ஒரு தனித்துவமான ரூட் கூறுடன் தொடங்குகிறது மற்றும் செயல்திறன் மற்றும் சோதனைக்கு ஏற்ற வரையறையில் சேவை வழங்குநர்களை (Router, HttpClient, போன்றவை) பதிவு செய்கிறது.

பயன்பாடு துவக்கத்தின் அடிப்படைகள்

தொடக்கம்

bootstrapApplication() ஐப் பயன்படுத்தி ஒரு தனித்துவமான ரூட் கூறுடன் தொடங்கவும்.

சிறப்பம்சங்கள் வழங்குதல்

துவக்கத்தில் provideRouter(), provideHttpClient(), போன்றவற்றைச் சேர்க்கவும்.

சார்பு உட்செலுத்தல்

ஒரு சேவை வழங்குநர், ஒரு டோக்கனுக்கான மதிப்பை எவ்வாறு உருவாக்குவது அல்லது வழங்குவது என்பதை சார்பு உட்செலுத்தலுக்கு அறிவுறுத்துகிறது.

வரையறை

செயல்திறன் மற்றும் சோதனைக்கு ஏற்றவாறு மிகச்சிறிய பயனுள்ள வரையறையில் (சிறப்பம்சம்/வழி) பதிவு செய்யவும்.

எடுத்துக்காட்டு குறியீடு

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(App, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

முக்கிய குறிப்புகள்:

  • தொடர்புடையவை: Router, HttpClient மற்றும் சேவைகள் & DI ஆகியவற்றைப் பார்க்கவும்.
  • செயல்திறன் மற்றும் சோதனைக்கு ஏற்றவாறு மிகச்சிறிய பயனுள்ள வரையறையில் (சிறப்பம்சம் அல்லது வழி) சேவை வழங்குநர்களைப் பதிவு செய்யவும்.
  • விரைவான துவக்கத்திற்கு provideRouter() ஐ சோம்பேறி வழிகளுடன் பயன்படுத்தவும்.

அடிப்படை துவக்கம் மற்றும் உலகளாவிய சேவை வழங்குநர்கள்

முழு பயன்பாட்டிற்கும் கிடைக்கும் வகையில் Router மற்றும் HttpClient உடன் துவக்கவும்.

ரூட் கூறை குறைவாக வைத்திருக்கவும்; சேவை வழங்குநர்களை துவக்கத்தில் கட்டமைக்கவும்.

துவக்க முறை

bootstrapApplication(App, { 
  providers: [ 
    provideRouter(routes), 
    provideHttpClient() 
  ] 
});

முழு எடுத்துக்காட்டு

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { Routes, provideRouter, RouterOutlet } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

@Component({
  selector: 'home-page',
  standalone: true,
  template: `<p>Home works</p>`
})
class Home {}

const routes: Routes = [
  { path: '', component: Home }
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`
})
class App {}

bootstrapApplication(App, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

எடுத்துக்காட்டு விளக்கம்:

  • bootstrapApplication(App): தனித்துவமான ரூட் கூறுடன் பயன்பாட்டைத் தொடங்குகிறது.
  • provideRouter(routes): Router மற்றும் வழிகளைப் பதிவு செய்கிறது.
  • provideHttpClient(): முழு பயன்பாட்டிலும் HttpClient ஐ இயக்குகிறது.
  • RouterOutlet: செயலில் உள்ள வழியின் கூறை வழங்குகிறது.

முக்கியமான குறிப்புகள்:

  • ரூட் கூறு இலகுவாக: ரூட் கூறை குறைவாக வைத்திருக்கவும்; சேவை வழங்குநர்களை bootstrapApplication() இல் கட்டமைக்கவும்.
  • செயல்பாடுகளைப் பயன்படுத்தவும்: பழைய தொகுதிகளுக்குப் பதிலாக provideRouter() மற்றும் provideHttpClient() ஐப் பயன்படுத்தவும்.
  • சோம்பேறி முதலில்: ஆரம்ப தொகுப்பைக் குறைக்கவும் மற்றும் துவக்கத்தை விரைவுபடுத்துவதற்கு சோம்பேறி வழிகளை விரும்பவும்.

சிறப்பம்ச வரையறை சேவை வழங்குநர்கள்

தேவையற்ற உலகளாவிய சேவைகளைத் தவிர்க்க, சேவைகளைத் தேவைப்படும் இடங்களில் மட்டுமே வழங்கவும்.

சிறப்பம்சம்/வழி சேவை வழங்குநர்கள் துவக்க நேரம் மற்றும் சோதனைக்கு ஏற்ற தன்மையை மேம்படுத்தும்.

சிறப்பம்ச வரையறை எடுத்துக்காட்டு

const routes = [
  { 
    path: 'admin', 
    providers: [provideHttpClient()], 
    loadComponent: () => import('./admin').then(m => m.Admin) 
  }
];
bootstrapApplication(App, { providers: [provideRouter(routes)] });

விரிவான எடுத்துக்காட்டு

import { Routes, provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';

const routes: Routes = [
  {
    path: 'admin',
    providers: [provideHttpClient()],
    loadComponent: () => import('./admin.component').then(m => m.AdminComponent)
  }
];

bootstrapApplication(App, { providers: [provideRouter(routes)] });

எடுத்துக்காட்டு விளக்கம்:

  • வழியில் சேவை வழங்குநர்கள்: provideHttpClient() ஐ /admin க்கு மட்டுமே இணைக்கிறது.
  • கூறை சோம்பலாக ஏற்றுதல்: வழிசெலுத்தலின் போது நிர்வாகி கூறை சோம்பலாக ஏற்றுகிறது.
  • வரையறை: மற்ற வழிகள் இந்த சேவை வழங்குநர்களைப் பெறாது, ரூட் கூறை இலகுவாக வைத்திருக்கிறது.

எச்சரிக்கைகள்:

  • வரையறையை கவனமாகச் செய்யவும்: தேவையற்ற உலகளாவிய ஒற்றை உருப்படிகளைத் தவிர்க்க, சேவை வழங்குநர்களை அவற்றுக்குத் தேவைப்படும் சிறப்பம்சங்களுக்கு மட்டுமே சேர்க்கவும்.
  • நகல் எடுப்பதைத் தவிர்க்கவும்: சேவை வழங்குநர்களை வரையறுப்பது புதிய நிகழ்வுகளை உருவாக்கும் என்பதை அறிந்து கொள்ளுங்கள்; இது திட்டமிட்டதாக உள்ளதா என்பதை உறுதிப்படுத்தவும்.

HttpClient அமைப்பு

தேவையான வரையறையில் provideHttpClient() ஐ ஒருமுறை சேர்க்கவும்.

அந்த வரையறைக்கு HttpClient ஐ இயக்குகிறது; தேவைப்படும் இடைமறுப்பிகளைச் சேர்க்கவும்.

இடைமறுப்பிகள் சிறியதாகவும் கவனம் செலுத்தியதாகவும் இருக்க வேண்டும்.

HttpClient அமைப்பு எடுத்துக்காட்டு

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(App, {
  providers: [provideHttpClient()]
});

குறிப்புகள்:

  • தனித்துவத்திற்கு ஏற்றது: தனித்துவமான பயன்பாடுகளில், HttpClientModule ஐ இறக்குமதி செய்வதை விட provideHttpClient() ஐப் பயன்படுத்தவும்.
  • குறுக்கு வெட்டு: அங்கீகாரம்/பதிவுக்கு இடைமறுப்பிகளைப் பயன்படுத்தவும்; பொருத்தமான வரையறையில் அவற்றை ஒருமுறை பதிவு செய்யவும்.

பயிற்சி

ஆங்குலர் பயன்பாட்டைத் தொடங்கி சார்பு உட்செலுத்தலைக் கட்டமைக்கும் செயல்பாடு எது?

சரியான பதிலைத் தேர்ந்தெடுக்கவும்:

bootstrapApplication
✓ சரி! bootstrapApplication() ஆங்குலர் பயன்பாட்டைத் தொடங்கி சார்பு உட்செலுத்தலைக் கட்டமைக்கிறது.
provideRouter
✗ தவறு! provideRouter() வழிகளை மட்டுமே வழங்குகிறது, பயன்பாட்டைத் தொடங்காது.
provideHttpClient
✗ தவறு! provideHttpClient() HTTP சேவைகளை மட்டுமே வழங்குகிறது, பயன்பாட்டைத் தொடங்காது.
அடுத்தது